<template>
    <div class="report-five">
        <div class="body">
            <div class="list">
                <h4>
                    <span>05</span>知识得分情况分析
                </h4>
                <div class="paint">
                    <div class="table">
                        <el-table  stripe :data="tableData" style="width: 100%" header-align="center" empty-text="暂无数据" class="report-table">
                            <el-table-column prop="knowledge" label="知识点名称" align="center" ></el-table-column>
                            <el-table-column prop="score" label="满分" align="center" ></el-table-column>
                            <el-table-column prop="getScore" label="得分" align="center"></el-table-column>
                            <el-table-column prop="getScore" label="成就度" align="center">
                                <template scope="scope">
                                    <span>{{scope.row.levelText}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                    <div class="chart" v-if="showChart">
                        <chart :options="option" :style="{width:'80%','margin-left':'10%',height:'220px'}"></chart>
                        <div class="legend">
                            <span ><i class="all"></i>满分</span>
                            <span ><i class="avg"></i>平均分</span>
                            <span ><i class="get"></i>个人得分</span>
                        </div>
                    </div>
                </div>
                <div class="info">
                <p>
                    {{showText}}
                </p>
            </div>
            </div>
        </div>
    </div>
</template>
<script>

import io from '../../lib/io'
import util from '../../lib/util'

export default {
    data(){
        return{
            reportId:'',
            showText:'',
            lows:[],
            middles:[],
            goods:[],
            allScore:"",
            allGetScore:"",
            tableData:[],
            showChart:false,
            option : {
                title: { text:null }, // 隐藏图表标题
                // legend: { enabled: false }, // 隐藏图例
                tooltip : {
                    trigger: 'axis'
                },
                calculable : true,
                polar : [
                    {
                        nameGap : 5, // 图中工艺等字距离图的距离
                        center:['50%','50%'], // 图的位置
                        name:{
                           show: true, // 是否显示工艺等文字
                           formatter: null, // 工艺等文字的显示形式
                           color:'#333',
                           textStyle: {
                             color:'#333333' // 工艺等文字颜色
                           }
                         },
                        indicator : [

                        ],
                        axisLine: {            // 坐标轴线
                            show: true,
                            lineStyle:{
                                width : 1,
                                color : '#d0dafd'
                            }        // 默认显示，属性show控制显示与否
                        },
                        axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
                            show: false,
                            textStyle: {
                                color: '#333' // 坐标轴刻度文字的样式
                            }
                        },
                        splitArea : {
                            show : true,
                            areaStyle : {
                                color: ["#fff"]  // 图表背景网格的颜色
                            }
                        },
                        splitLine : {
                            show : true,
                            lineStyle : {
                                width : 1,
                                color : '#488EED' // 图表背景网格线的颜色
                            }
                        }
                    }
                ],
                series : [
                    {
                        name: '',
                        type: 'radar',
                        // symbol: "none", // 去掉图表中各个图区域的边框线拐点
                        itemStyle: {
                            // borderColor:'red',
                            normal: {
                                // color : "#", // 图表中各个图区域的边框线拐点颜色
                                // lineStyle: {
                                //     color:"white" // 图表中各个图区域的边框线颜色
                                // },
                                areaStyle: {
                                    type: 'default',
                                    opacity: 0.6,
                                }
                            }
                        },
                        data : [
                            {
                                value : [],
                                itemStyle: {
                                    normal: {
                                        // color:'#d0dafd',
                                        color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: '#f0cca0' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: '#ff5501' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            },
                                        opacity: 0,
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0, // 图表中各个图区域的透明度
                                            color: "#d0dafd ",// 图表中各个图区域的颜色

                                        }
                                    }
                                },
                                name : '平均分'
                            },
                            {
                                value : [],
                                itemStyle: {
                                    normal: {
                                        // color:'#ff5501',
                                        color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: '#90d7f8' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: '#336af0' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            },
                                        // opacity: 0.2,
                                        areaStyle: {
                                            type: 'default',
                                            opacity: 0.8,
                                            color: {
                                                type: 'linear',
                                                x: 0,
                                                y: 0,
                                                x2: 0,
                                                y2: 1,
                                                colorStops: [{
                                                    offset: 0, color: 'red' // 0% 处的颜色
                                                }, {
                                                    offset: 1, color: 'blue' // 100% 处的颜色
                                                }],
                                                globalCoord: false // 缺省为 false
                                            }
                                            // color: "#ff5501", // 图表中各个图区域的颜色
                                        }
                                    },

                                },
                                name : '个人得分'
                            },
                        ]
                    }
                ]
            }
        }
    },
    created(){
        this.reportId = this.$route.query.reportId
        this.reportKnow()
    },
    methods:{
        reportKnow(){
            let param = {
                reportId:this.reportId,
            }
            io.post(io.reportKnow,param,(ret)=>{
                this.showText=ret.comment
                    let data = ret.list
                    let knowledge = []
                    let getScore = []
                    let allGetScore = 0
                    let avgScore = []
                    let score = []
                    let low = []
                    let middle = []
                    let good = []
                    let allScore=0

                    data.map((item)=>{
                        knowledge.push({text:item.knowledge,max:item.score})
                        getScore.push(item.getScore)
                        avgScore.push(item.avgScore)
                        score.push(item.score)
                        allScore = Number(allScore) + Number(item.score)
                        allGetScore = Number(allGetScore) + Number(item.getScore)
                        if(item.scoringRate<=0.3){
                            low.push(item.knowledge)
                        }else if(0.3 < item.scoringRate&&item.scoringRate <= 0.7){
                            middle.push(item.knowledge)
                        }else if(item.scoringRate > 0.7){
                            good.push(item.knowledge)
                        }
                    item.levelText= util.showLevel(item.scoringRate,[0.7,0.3],['优秀','良好','待提高'])
                    })
                    this.lows = low
                    this.middles = middle
                    this.goods = good
                    this.allScore = allScore
                    this.allGetScore = allGetScore
                    if(data.length>0){
                        data.push({
                            score: allScore.toFixed(2),
                            getScore:allGetScore.toFixed(2),
                            knowledge:'总分',
                            scoringRate:allGetScore/allScore,
                            levelText:util.showLevel(allGetScore/allScore,[0.7,0.3],['优秀','良好','待提高'])
                        })
                    }
                        this.tableData = data
                    this.option.polar[0].indicator = knowledge
                    this.option.series[0].data[0].value = avgScore
                    this.option.series[0].data[1].value = getScore
                    this.showChart=true
                    console.log(this.option)

            })
        }
    }
}
</script>
<style lang="less" scoped>
.report-five {

    .body{
        padding:46px 0;
        background:#fff;
        .list{
            width:80%;
            max-width:960px;
            margin:0 auto;
            h4{
                font-size:32px;
                color:#ff7853;
                margin:0;
                height:32px;
                line-height:32px;
                font-weight: 100;
                span{
                    height: 32px;
                    line-height: 32px;
                    font-weight: 100;
                    // display: inline-block;
                    float:left;
                    font-size:40px;
                    color:#488eed;
                    padding-right:24px;
                    margin-right:17px;
                    border-right:2px solid #488eed;
                }
            }
            .paint{
                margin-top:40px;
                width:100%;
                display: box;               /* OLD - Android 4.4- */
                display: -webkit-box;       /* OLD - iOS 6-, Safari 3.1-6 */
                display: -moz-box;          /* OLD - Firefox 19- (buggy but mostly works) */
                display: -ms-flexbox;       /* TWEENER - IE 10 */
                display: -webkit-flex;      /* NEW - Chrome */
                display: flex;
                .table{
                    display:inline-block;
                    width:56%;
                }
                .chart{
                    -webkit-box-flex: 1;              /* OLD - iOS 6-, Safari 3.1-6 */
                    -moz-box-flex: 1;                 /* OLD - Firefox 19- */
                    -webkit-flex: 1;                     /* Chrome */
                    -ms-flex: 1;                           /* IE 10 */
                    flex: 1;
                    .legend{
                        text-align: center;
                        margin-top:20px;
                        font-size:16px;
                        i{
                            display:inline-block;
                            width:15px;
                            height:15px;
                            border-radius: 50%;
                            vertical-align: -2px;
                            margin-right:10px;
                        }
                        span+span{
                            margin-left:40px;
                        }
                        .all{
                            background-color:#d0dafd;

                        }
                        .get{
                            background:#336af0;

                        }
                        .avg{
                            background:#ff5501;
                        }
                    }
                }
            }
            .info{
                margin-top:40px;
                font-size:16px;
                em{
                    font-style:normal;
                }
            }

        }
    }
}
</style>
<style lang="less">
.report-five{
    .report-table{

        border: solid 1px #a3c6f6;
        border-radius:0;
        // border-top:1px solid #9ab9df !important;
        border-top-left-radius:8px;
        border-top-right-radius:8px;
        font-size:16px;
        &.el-table th, .el-table__fixed-header-wrapper thead div, .el-table__header-wrapper thead div, .el-table__footer-wrapper thead div{
            // background:rgb(231, 236, 255);
            background:#488eed;
            color:#fff;
            font-size:18px;
            font-weight:normal;
        }
        &.el-table th{
            border-bottom:1px solid #9ab9df;
        }
         &.el-table td{
            // border-bottom:1px dashed #9ab9df;
            border-bottom:0 none;
        }
        .el-table--striped .el-table__body tr.el-table__row--striped td{
            background:#ecf3fd !important;
        }

    }
    .el-table--striped .el-table__body tr.el-table__row--striped td{
        background:#ecf3fd ;
    }
    .el-table  .el-table__body  .delstatu:hover>td{
        background: transparent;
    }
}
</style>



